<!-- 
    客户端从浏览器向服务器发起请求
    1. 响应回来一个html页面，浏览器解析器生成一个DOM树
    2. css文件： 浏览器css解析器会根据css文件生成一个css的渲染树
    3. js文件：浏览js解析器会解析js文件， 一般会操作dom
              oDiv.style.height = '200px'
              oDiv.style.width = '100px'
              oDiv.style.left = '50px';

    当dom元素的几何属性发生改变的时候，会触发浏览器的重排和重绘

    1. 几何属性：宽、高、位置、边框、padding、margin。几个属性的改变不光影响自己，还影响其他元素
    2. 重排：几何属性发生改变，所有相关受影响的元素都需要重新计算位置，计算的过程叫做重排，
    3. 重绘：计算后重新渲染，重新渲染的过程叫做重绘。重排必然导致重绘
    所以：传统的dom操作，会导致大量的浏览器的重排和重绘，性能很差
    4. 重排必然导致重绘，但重绘不一定需要重排[改变的是颜色等非集合属性会重绘]

    const oDiv = document.getElementById('root') oDiv 是真实dom元素对象
    const oDiv2 = document.createElement('div'); 创建一个真实dom元素
    document.body.append(oDiv2);
    只要操作真实dom元素了，就会导致重排和重绘
    oDiv.style.heigth = '200px'

    虚拟DOM：[vue、react]
    1. 本身就是一个对象
    2. 对象中的属性非常少，但是它有的属性和真实dom的属性是一一对应的
    3. 虚拟dom可以通过 render方法转化为真实dom
    4. 在react学习中，我们将虚拟dom又称为 react元素
    5. react中如何创建react元素？
        5-1. React.createElement
        5-2. jsx
-->